import React from 'react';

import { ReactComponent as ChevronLeft } from '@/assets/images/auth/ChevronLeft.svg';
import { ReactComponent as CloseCircle } from '@/assets/images/auth/CloseCircle.svg';
import { ReactComponent as CloseCircleMobile } from '@/assets/images/auth/CloseMobileSmall.svg';
import ConvertPNG from '@/assets/images/auth/Convert.png';
import { restorePassword } from '@/entities/auth/model/actions';
import { getAuthProcessEmail } from '@/entities/auth/model/selectors';
import { useAppDispatch, useAppSelector } from '@/shared/store';
import { Button, ButtonVariants } from '@/shared/ui/Button';
import cn from 'classnames';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import s from './ForgotPassword.module.scss';

interface ForgotProps {
  setIsForgot: () => void;
}

export const ForgotPassword = ({ setIsForgot }: ForgotProps) => {
  const { width } = useWindowSize();
  const email = useAppSelector(getAuthProcessEmail);
  const [isMessageSent, setIsMessageSent] = React.useState<boolean>(false);

  const goBackToAuth = () => {
    setIsForgot();
  };

  const dispatch = useAppDispatch();

  const handleGetNewPassword = () => {
    dispatch(restorePassword({ email })).then(() => {
      setIsMessageSent(true);
    });
  };

  const handleBackFromGettingMessage = () => {
    setIsMessageSent(false);
    setIsForgot();
    goBackToAuth();
  };

  React.useEffect(() => {
    if (!email) {
      goBackToAuth();
    }
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  if (width < 768) {
    return (
      <>
        {!isMessageSent ? (
          <>
            <div className={s.fadedMobile}></div>
            <div className={s.choose}>
              {/* <FlexWrapper>
                <Home onClick={() => setIsForgot()} />
              </FlexWrapper> */}
              <div className={cn(s.flexColCentered, s.titleBlock)}>
                <h4 className={s.title}>Получить пароль</h4>
              </div>
              <div className={s.sent}>
                Отправим новый пароль
                <div>на {email}</div>
              </div>
              <div className={cn(s.flexColCentered, s.insideBlock)}>
                <Button
                  data-testid="button-get_new_password"
                  disabled={false}
                  onClick={handleGetNewPassword}
                  variant={ButtonVariants.Primary}
                >
                  Получить
                </Button>
              </div>
              <Button className={s.closeCircleMobile} data-testid="button-close_modal" onClick={() => setIsForgot()}>
                <CloseCircleMobile />
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className={s.fadedMobile}></div>
            <div className={s.chooseConvert}>
              {/* <FlexWrapper>
                <Home onClick={goBackToAuth} />
              </FlexWrapper> */}
              <div className={cn(s.flexColCentered, s.titleBlock, s.convert)}>
                {/* <Convert /> */}
                <Image alt="Convert" height={128} src={ConvertPNG} width={128} />
              </div>
              <div className={cn(s.flexColCentered, s.titleBlock)}>
                <h4 className={s.titleSent}>Пароль отправлен</h4>
              </div>
              <div className={s.sent}>
                Проверьте Входящие или&nbsp;Спам.
                <div>Если письмо не пришло, напишите нам.</div>
              </div>
              <div className={s.closeCircleMobile} onClick={handleBackFromGettingMessage}>
                <CloseCircleMobile />
              </div>
            </div>
          </>
        )}
      </>
    );
  }

  return !isMessageSent ? (
    <>
      <div className={s.container}>
        <Button className={s.closeCircle} data-testid="button-close_modal" onClick={() => setIsForgot()}>
          <CloseCircle />
        </Button>
        <Button className={s.chevronLeft} data-testid="button-redirect_back" onClick={goBackToAuth}>
          <ChevronLeft />
        </Button>
        <div className={cn(s.flexColCentered, s.titleBlock)}>
          <h4 className={s.title}>Получить пароль</h4>
        </div>
        <p className={s.sent}>
          Отправим новый пароль <br />
          на {email}
        </p>
        <div className={cn(s.flexColCentered, s.insideBlock)}>
          <Button
            data-testid="button-get_new_password"
            disabled={false}
            onClick={handleGetNewPassword}
            variant={ButtonVariants.Primary}
          >
            Получить
          </Button>
        </div>
      </div>
    </>
  ) : (
    <>
      <div className={s.container}>
        <div className={cn(s.flexColCentered, s.titleBlock, s.convert)}>
          {/* <Convert /> */}
          <Image alt="Convert" height={143.5} src={ConvertPNG} width={143.5} />
        </div>
        <div className={cn(s.flexColCentered, s.titleBlock)}>
          <h4 className={s.titleSent}>Пароль отправлен</h4>
        </div>
        <div className={s.sent}>
          Проверьте Входящие или&nbsp;Спам.
          <div>Если письмо не пришло, напишите нам.</div>
        </div>
        <Button className={s.closeCircle} data-testid="button-redirect_back" onClick={handleBackFromGettingMessage}>
          <CloseCircle />
        </Button>
      </div>
    </>
  );
};
